import React, {FC, useEffect, useState} from "react";
import {Button, Form, Input, message, Result, Select, Steps} from "antd";
import {inject, observer} from "_mobx-react@6.3.1@mobx-react";
import {reg} from "../../../utils";
import api from "../../../api";
import {useNavigate} from "react-router-dom";
import BreadcrumbPath from "../../../components/BreadcrumbPath";

const UpProject: FC<any> = ({MobxData}) => {
    const navigator = useNavigate();
    // 项目类别
    const {projectTypeList, getProjectTypeList} = MobxData;

    const [form] = Form.useForm();

    const [current, setCurrent] = useState(0)

    const [status, setStatus] = useState(false)

    useEffect(() => {
        getProjectTypeList();
    }, [])

    return (
        <div>
            {/*<h1>提交项目</h1>*/}
            <BreadcrumbPath/>
            <Steps size="small" current={current}>
                <Steps.Step title="填写项目相关信息"/>
                <Steps.Step title="确认项目信息"/>
                <Steps.Step title="提交成功"/>
            </Steps>
            <div style={{height: "450px", overflowY: "auto"}}>
                {/* 第一步 */}
                {
                    current === 0 && (
                        <Form
                            style={{margin: "0 auto", width: "50%",}}
                            name="basic"
                            form={form}
                            layout='vertical'
                        >
                            <Form.Item
                                label="项目名称"
                                name="name"
                                rules={[{required: true, message: '项目名称不能为空!'}]}
                            >
                                <Input size="large" placeholder="请输入项目名称"/>
                            </Form.Item>
                            <Form.Item
                                label="项目类别"
                                name="type"
                                rules={[{required: true, message: '项目类别不能为空!'}]}
                            >
                                <Select size="large" placeholder="请选择项目类别" style={{width: "100%"}} onChange={(value) => {
                                }}>
                                    {
                                        projectTypeList.map((item: any) => {
                                            return <Select.Option value={item.name}
                                                                  key={item._id}>{item.name}</Select.Option>
                                        })
                                    }
                                </Select>
                            </Form.Item>
                            <Form.Item
                                label="亮点及内容"
                                name="content"
                                rules={[{required: true, message: '亮点及内容不能为空!'}]}
                            >
                                <Input.TextArea size="large" placeholder="请输入亮点及内容" rows={4} allowClear autoSize showCount/>
                            </Form.Item>
                            <Form.Item
                                label="项目地址"
                                name="url"
                                rules={[
                                    {required: true, message: '项目地址不能为空!'},
                                    {pattern: reg.url, message: '请输入正确的项目地址!'}
                                ]}
                            >
                                <Input size="large" type="url" placeholder="请输入项目地址"/>
                            </Form.Item>
                        </Form>
                    )
                }
                {/* 第二步 */}
                {
                    current === 1 && (
                        <div style={{textAlign: "center"}}>
                            <div style={{textAlign: "left", width: "auto", display: "inline-block", fontSize: "16px"}}>
                                <div style={{marginBottom: "20px"}}>
                                    <span style={{fontSize: "20px"}}>项目名称：</span>
                                    <span style={{fontSize: "20px", color: "#1890ff"}}>{form.getFieldValue("name")}</span>
                                </div>
                                <div style={{marginBottom: "20px"}}>
                                    <span style={{fontSize: "20px"}}>项目类别：</span>
                                    <span style={{
                                        fontSize: "20px",
                                        color: "#1890ff"
                                    }}>{form.getFieldValue("name")}</span>
                                </div>
                                <div style={{marginBottom: "20px"}}>
                                    <span style={{fontSize: "20px"}}>亮点及内容：</span>
                                    <span
                                        style={{
                                            fontSize: "20px",
                                            color: "#1890ff",
                                            wordBreak: "break-all"
                                        }}>{form.getFieldValue("content")}</span>
                                </div>
                                <div style={{marginBottom: "20px"}}>
                                    <span style={{fontSize: "20px"}}>项目地址：</span>
                                    <span style={{fontSize: "20px", color: "#1890ff"}}>{form.getFieldValue("url")}</span>
                                </div>
                            </div>
                        </div>
                    )
                }
                {/* 第三步 */}
                {
                    current === 2 && (
                        <Result
                            status={status ? "success" : "error"}
                            title={status ? "项目提交成功" : "项目提交失败"}
                            subTitle={status ? "请耐心等待老师的审核..." : "请检查项目信息是否正确或等一会再试..."}
                            extra={[
                                <Button type="primary" key="console" onClick={() => {
                                    navigator("/main/project/myProject")
                                }}>去查看我的项目</Button>
                            ]}
                        />
                    )
                }
            </div>

            <div style={{width: "40%", margin: "0 auto", display: "flex", justifyContent: "space-evenly"}}>
                {
                    current > 0 && current < 2 && <Button type="primary" size="large" onClick={() => {
                        setCurrent(current - 1)
                    }}>上一步</Button>
                }
                {
                    current < 2 && <Button type="primary" size="large" onClick={async () => {
                        if (current === 0) {
                            try {
                                await form.validateFields()
                            } catch (e) {
                                return
                            }
                        } else if (current === 1) {
                            api.addProject(form.getFieldsValue(true)).then(res => {
                                setCurrent(current + 1)
                                if (res.data.code === 200) {
                                    setStatus(true)
                                } else {
                                    setStatus(false)
                                }

                            }).catch(err => {
                                message.error(err)
                                setStatus(false)
                            })
                        }
                        setCurrent(current + 1)
                    }}>下一步</Button>
                }
            </div>
        </div>
    )
}

export default inject('MobxData')(observer(UpProject));